<template>
	<view class="recommendContainer">
		<!-- 轮播图 -->
		<swiper class="banner" indicator-dots indicator-active-color="red" autoplay interval="2000">
			<swiper-item><image src="../../static/images/4ea26f20cfac21b1e508a8bdc6c05e93.jpeg"></image></swiper-item>
			<swiper-item><image src="../../static/images/4ea26f20cfac21b1e508a8bdc6c05e93.jpeg"></image></swiper-item>
			<swiper-item><image src="../../static/images/4ea26f20cfac21b1e508a8bdc6c05e93.jpeg"></image></swiper-item>
			<swiper-item><image src="../../static/images/4ea26f20cfac21b1e508a8bdc6c05e93.jpeg"></image></swiper-item>
		</swiper>
		<!-- 政策信息 -->
		<view class="policyDescList">
			<view class="policyDescItem" v-for="(policyDescItem, index) in policyDescList" :key="index">
				<image :src="policyDescItem.icon"></image>
				<text>{{ policyDescItem.desc }}</text>
			</view>
		</view>
		<!-- 导航菜单 -->
		<view class="kingKongList">
			<view class="kingKongItem" v-for="(kingKongItem, index) in kingKongList" :key="kingKongItem.L1Id">
				<image :src="kingKongItem.picUrl"></image>
				<text>{{ kingKongItem.text }}</text>
			</view>
		</view>
		<!-- 首页分类 -->
		<Category></Category>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';

import Category from '../Category/index.vue';

export default {
	name: 'Recommend',
	components: {
		Category
	},
	computed: {
		...mapGetters(["policyDescList", "kingKongList"])
	}
};
</script>

<style lang="stylus">
.recommendContainer
	.banner
		width 100%
		height 370rpx
		image
			width 100%
			height 100%
	.policyDescList
		margin-top 10rpx
		display flex
		.policyDescItem
			flex 1
			text-align center
			image
				width 32rpx
				height 32rpx
				border-radius 50%
				vertical-align middle
			text
				font-size 28rpx
				vertical-align middle
	.kingKongList
		display flex
		flex-wrap wrap
		.kingKongItem
			width 20%
			display flex
			flex-direction column
			align-items center
			margin 10rpx 0
			image
				width 100rpx
				height 100rpx
.test
	width 100rpx
</style>
